{% extends 'templates/users/personal.html' %}
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>添加地址</title>

    {% block headjs %}
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>

    {% endblock %}
</head>
{% block main %}
    <div class="title">修改资料</div>
    <div id="myPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; padding:20px; border:1px solid #ccc; z-index:1000;">
    <span style="color:red;" id="aSpan"></span>

</div>
    <form  action="/modify_personal/" style="width: 600px;margin-left: 100px" method="post" onsubmit="return TJ();">
        {% csrf_token %}
        <div style="width:600px;padding-bottom: 30px;padding-top: 30px">
            <label style="font-size: 20px">姓名</label>

                <input type="text" name="aname" id="aname" placeholder="请输入姓名"
                style="width:200px ;height: 30px;margin-left: 50px">

            <label style="font-size: 20px;margin-left: 50px">性别</label>
                <input type="text" name="gender" id="gender"  placeholder="男/女"
                style="width:60px ;height: 30px;margin-left: 20px">


        </div>
        <div style="width:600px;padding-bottom: 30px">
            <label style="font-size: 20px">手机号</label>

                <input type="text" name="aphone" id="aphone" placeholder="请输入手机号" autocomplete="off"
                style="width:200px ;height: 30px;margin-left: 30px;">
            <label style="font-size: 20px;margin-left: 50px">年龄</label>
                <input type="text" name="age" id="age" placeholder="" autocomplete="off"
                style="width:60px ;height: 30px;margin-left: 20px">

        </div>
        <div style="width:600px;padding-bottom: 30px">
            <label style="font-size: 20px">所在地</label>

                <select id="province" onchange="loadCity();" style="width: 120px;height: 40px;margin-left: 30px">
                </select>


                <select id="city" onchange="loadTown()" style="width: 120px;height: 40px;">
                </select>


                <select id="town" style="width: 120px;height: 40px;"></select>

        </div>

        <div style="width:400px;">
            <label style="font-size: 20px;" >详细地址</label>
               <div style="padding-top: 20px; ">
                   <textarea id="user-intro" name="addr" id="addr" placeholder="请输入详细地址" style=" width: 500px;height: 100px;" onfocus="getAddr()"></textarea>
                </div>
        </div>

        <button style="width: 100px;height: 45px;margin-top:40px;margin-left: 180px;" >立即提交</button>
    </form>



{% endblock %}
{% block footjs %}
<script>
    function TJ(){
        //获取输入框的值
        var aname = $('#aname').val();
        var gender = $('#gender').val();
        var age = $('#age').val();
        var aphone = $('#aphone').val()
        var addr = $('#addr').text();

        if (aname.length < 1) {
           $('#aSpan').html('请填写用户名');
           showPopup()
           return false;
        }
        if (gender.length < 1) {
           $('#aSpan').html("请填写您填写性别");
           showPopup();
           return false;
        }
        if (gender!=='男' && gender!=='女'){
            $('#aSpan').html("请填写男或者女");
           showPopup();
           return false;
        }
        if (aphone.length < 11){
            $('#aSpan').html('请输入正确手机号');
            showPopup()
           return false;
        }
        if (age.length<1){
            $('#aSpan').html("请输入您的年龄")
            showPopup();
            return false
        }
        if (addr.length < 0){
            $('#aSpan').html('请填写详细地址');
            showPopup()
           return false;
        }

    }

   //三级联动
    //页面加载事件
    $(function(){
        loadProvince();
    });

    function loadProvince(){
        loadArea('province',0,loadCity);
    }

    function loadCity(){
        loadArea('city', $('#province').val(),loadTown);
    }

    function loadTown(){
        loadArea('town', $('#city').val());
    }


    function loadArea(selectId, pid, nextLoad){
        $.get('/loadarea/',{'pid':pid}, function (result) {

            $('#' + selectId).empty();
            // 将JSON格式字符串转成JSON对象数组
            console.log(result.area_list_json)
            var area_list = JSON.parse(result.area_list_json)

            //遍历
            // 去页面右键控制台可以看到数据，pk代表数据库中的areaid
            for (let i = 0;i < area_list.length;i++){
                // 获取每个area

                var area = area_list[i];
                $('#' + selectId).append("<option value='"+ area.pk+"'>"+area.fields.areaname+"</option>");

            }
            //判断是否还有下一项
            if(nextLoad != null){
                nextLoad()
            }

        });
    }

    function getAddr() {
        //jquire中select发内置方法获取到option中的值
        province = $("#province option:selected").text()
        city = $("#city option:selected").text()
        town = $("#town option:selected").text()

        //拼接
        var addr = province + city + town
        $('#user-intro').val(addr)
    }

    function showPopup() {
        // 显示弹窗
        $('#myPopup').show();

        // 设置延时2秒后隐藏弹窗
        setTimeout(function(){
            $('#myPopup').hide();
        }, 2000); // 2000毫秒 = 2秒
    }


</script>

{% endblock %}